<template>
  <el-drawer v-model="dialog.visible" title="" show-close>
    <div v-loading="loading">
      <el-descriptions :column="1" :size="size" border>
        <template v-for="item in itemList">
          <el-descriptions-item :label="item.label" width="80" label-align="right">

            <template v-if="item.type==='code'">
              <code>
                {{ dataObj[item.key] || '--' }}
              </code>
            </template>
            <template v-else>
              {{ dataObj[item.key] || '--' }}
            </template>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </div>
  </el-drawer>
</template>
<script setup>
import moment from 'moment';
import LogAPI from '@/api/system/log'
const emit = defineEmits(["resetData"]);
const loading = ref(false)
const dialog = ref({
  visible: false,
  title: ""
})
const itemList = [
  { label: "操作人ID", key: "user_id" },
  { label: "IP", key: "ip" },
  { label: "操作时间", key: "time" },
  { label: "接口", key: "path" },
  { label: "请求方式", key: "method" },
  { label: "请求参数", key: "payload", type: "code" },
]
const dataObj = ref({})
const show = (id) => {
  dialog.value.visible = true
  loading.value = true
  dataObj.value = {}
  LogAPI.get(id).then(s => {
    console.log(s);
    const datas = s.data
    datas.payloas = datas.payload ? datas.payload.name : ''
    datas.time = moment(datas.created_at).format('YYYY-MM-DD HH:mm:ss')

    dataObj.value = datas
  }).finally(() => {
    loading.value = false
  })
}
defineExpose({ show })
</script>